<template>
  <el-card class="box-card" style="margin:0 auto">
    <div style="width: 15%;margin-top:10px;float:left;text-align:center">
      <el-avatar :size="70" :src="data.imageUrl"></el-avatar>
      <p style="font-size: 22px;font-weight: 500;cursor:pointer" @click="toInfoMain()">{{ data.nickName }}</p>
    </div>

    <div style="width: 64%;float:left;">
      <span style="font-size: 20px;cursor:pointer" id="titleProgrammer" @click="toInfoMain()">
        {{ data.programmerCompany }} {{ data.programmerCareer }}
      </span>
      <el-rate style="margin-bottom: 10px"
               v-model="data.starRating"
               disabled
               show-score
               text-color="#ff9900"
               score-template="{value}">
      </el-rate>
      <p style="color: #8c939d;margin-top: 10px">
        可工作地点：<span style="color: #007bff">{{ data.regionCity }}</span><br>
        可工作时间：<span style="color: #007bff">工作日: {{ data.WDBT }} - {{ data.WDET }}</span>
        <span style="color: #007bff"> 周末:{{ data.WWBT }} - {{ data.WWET }}</span>
      </p>
    </div>

    <div style="width: 20%;float:right;text-align: center;border-left:2px solid #cce5ff">
      <span style="font-size: 26px;font-weight: 400;color: #007bff">{{ data.salary }}/天</span>
      <el-button type="primary" plain style="width: 80%">立即沟通</el-button>
      <el-button type="primary" style="width: 80%;margin: 10px 0 0 0" @click="toFather()">添加到对比</el-button>
    </div>

  </el-card>
</template>

<script>
export default {
  name: "ProgrammerComponents",
  props: ['data'],
  methods: {
    toInfoMain() {
      this.$emit('toInfoMain', this.data.userId)
    },
    toFather() {
      this.$emit('toCompared', this.data)
    }
  }
}
</script>

<style scoped>
#titleProgrammer:hover {
  color: #007bff;
}

</style>